<form class="form-horizontal" #form="ngForm">
  <div class="form-group">
    <label class="col-sm-2 control-label">默认示例</label>
    <div class="col-sm-5">
      <input name="async1" class="form-control"
             required
             #async1Box="ngModel" [(ngModel)]="async1"   [ngModelOptions]="{ updateOn: 'blur' }"
             greatAsync="http://localhost:3000/role/unique"
             paramName="code">
    </div>
    <div class="col-sm-4">
      <span class="help-block">必填且唯一！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="async1Box.invalid && (async1Box.dirty || async1Box.touched)">
      示例结果：{{async1Box?.errors|json}}
    </div>
  </div>
  <div class="col-sm-offset-2">
    <p>此示例涉及指令为：greatAsync、paramName</p>
    <p>greatAsync指定后端地址</p>
    <p>paramName指定后端地址接收的参数key</p>
    <p>错误信息在pattern的message中</p>
  </div>

<!-- 第二个示例-->
  <div class="form-group">
    <label class="col-sm-2 control-label">指定fieldName</label>
    <div class="col-sm-5">
      <input name="async2" class="form-control"
             required
             #async2Box="ngModel" [(ngModel)]="async2"   [ngModelOptions]="{ updateOn: 'blur' }"
             greatAsync="http://localhost:3000/role/unique"
             fieldName="async2" paramName="code">
    </div>
    <div class="col-sm-4">
      <span class="help-block">必填且唯一！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="async2Box.invalid && (async2Box.dirty || async2Box.touched)">
      {{async2Box?.errors|json}}
    </div>
  </div>
  <div class="col-sm-offset-2">
    <p>此示例涉及指令为：greatAsync、paramName、fieldName</p>
    <p>greatAsync指定后端地址</p>
    <p>paramName指定后端地址接收的参数key</p>
    <p>fieldName指定验证结果的key，默认为pattern</p>
    <p>错误信息在[fieldName]中的message中</p>
  </div>

<!-- 第三个示例-->
  <div class="form-group">
    <label class="col-sm-2 control-label">指定errorMsg</label>
    <div class="col-sm-5">
      <input name="async3" class="form-control"
             required
             #async3Box="ngModel" [(ngModel)]="async3"   [ngModelOptions]="{ updateOn: 'blur' }"
             greatAsync="http://localhost:3000/role/unique"
             fieldName="async3" paramName="code" errorMsg="编码已经存在，请重新输入！">
    </div>
    <div class="col-sm-4">
      <span class="help-block">必填且唯一！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="async3Box.invalid && (async3Box.dirty || async3Box.touched)">
      {{async3Box?.errors|json}}
    </div>
  </div>
  <div class="col-sm-offset-2">
    <p>此示例涉及指令为：greatAsync、paramName、fieldName</p>
    <p>greatAsync指定后端地址</p>
    <p>paramName指定后端地址接收的参数key</p>
    <p>fieldName指定验证结果的key，默认为pattern</p>
    <p>errorMsg指定验证结果中的错误消息内容，默认从后台中返回</p>
    <p>errorMsgKey指定验证结果中的错误消息key，默认为message</p>
    <p>错误信息在[fieldName]中的[errorMsgKey]中</p>
  </div>

<!-- 第四个示例-->
  <div class="form-group">
    <label class="col-sm-2 control-label">指定errorMsgKey</label>
    <div class="col-sm-5">
      <input name="async4" class="form-control"
             required
             #async4Box="ngModel" [(ngModel)]="async4"   [ngModelOptions]="{ updateOn: 'blur' }"
             greatAsync="http://localhost:3000/role/unique"
             fieldName="async4" paramName="code" errorMsg="编码已经存在，请重新输入！" errorMsgKey="errorMsg">
    </div>
    <div class="col-sm-4">
      <span class="help-block">必填且唯一！</span>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 pull-right has-error" *ngIf="async4Box.invalid && (async4Box.dirty || async4Box.touched)">
      {{async4Box?.errors|json}}
    </div>
  </div>
  <div class="col-sm-offset-2">
    <p>此示例涉及指令为：greatAsync、paramName、fieldName</p>
    <p>greatAsync指定后端地址</p>
    <p>paramName指定后端地址接收的参数key</p>
    <p>fieldName指定验证结果的key，默认为pattern</p>
    <p>errorMsg指定验证结果中的错误消息内容，默认从后台中返回</p>
    <p>errorMsgKey指定验证结果中的错误消息key，默认为message</p>
    <p>错误信息在[fieldName]中的[errorMsgKey]中</p>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" [disabled]="!form.form.valid">保 存</button>
    </div>
  </div>
</form>
